import React, { Component } from 'react'
import { Menu, Icon } from 'antd';
import { Link, withRouter } from 'react-router-dom'

import './index.less'
import logo from '../../assets/imgs/logo.jpg'
import menuList from '../../config/menuList'

const { SubMenu } = Menu;
class LeftNav extends Component {

    getMenuNode = menuList => {
        return menuList.map(item => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {
                            this.getMenuNode(item.children)
                        }
                    </SubMenu>
                )
            }
        })
    }
    render() {
        const path = this.props.location.pathname
        return (
            <div className="leftnav">
                <header className="leftnav-header">
                    <img src={logo} alt="" style={{borderRadius: '50%'}}/>
                    {!this.props.collapsed && <h3>react后台</h3>}
                </header>

                <Menu
                    mode="inline"
                    theme="dark"
                    selectedKeys={[path]}
                >
                    {
                        this.getMenuNode(menuList)
                    }
                </Menu>
            </div>
        )
    }
}

export default withRouter(LeftNav)
